<template>
  <div>
    <v-btn elevation="0" aria-label="收藏按钮" icon variant="text" @click="handShoucang"
      ><j-icon :color="color">mdi-heart</j-icon></v-btn
    >
    <div class="d-sr-only" role="alert" v-if="alertShow">
      {{ isc ? "已收藏" : "取消收藏" }}
    </div>
  </div>
</template>

<script>
import { gedanController } from "@/api/cloudbase-user-action-log";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "ShouZangBtn",

  data() {
    return {
      // list: [],
      alertShow: false,
    };
  },
  computed: {
    ...mapGetters({
      list: "collector/list",
      id: "collector/id",
    }),
    isc() {
      return this.list.some((item) => item == this.$route.params.id);
    },
    color() {
      return this.isc ? "#EF6C00" : "#9E9E9E";
    },
  },
  methods: {
    ...mapActions({
      init: "collector/init",
    }),
    handShoucang() {
      if (this.isc) {
        gedanController.removeGeDanDatailList(this.id, this.$route.params.id).then(() => {
          this.$toast.info("取消收藏");
          this.init({ changed: true });
        });
      } else {
        gedanController.addGeDanDatailList(this.id, this.$route.params.id).then(() => {
          this.$toast.success("收藏成功");
          this.init({ changed: true });
        });
      }
    },
  },
  mounted() {
    this.init();
  },

  watch: {
    "$route.params.id": function () {
      console.log(this.$route.params.id);
      this.init();
    },
  },
};
</script>

<style>
.wxts {
  position: absolute;
  top: -20px;
}

.alert {
  position: absolute;
  top: 0px;
}
</style>
